<div class="item-outline-field">
  <div class="plain-item-row">
    <label class="item-outline-label">{{ label }}</label>
    <button mat-icon-button class="scroll-button left-scroll" (click)="scrollLeft()" *ngIf="showScrollButtons && !allOptionsSelected">
      <mat-icon>chevron_left</mat-icon>
    </button>
    <div class="horizontal-scroll-container" #scrollContainer>
      <ng-container *ngIf="allOptionsSelected; else chipsAndInput">
        <div style="display: flex; align-items: center; gap: 8px;">
          <mat-slide-toggle
            color="primary"
            [checked]="true"
            (change)="onAllOptionsToggle($event)">
          </mat-slide-toggle>
          <span style="user-select: none;">ALL {{ label | uppercase }}</span>
        </div>
      </ng-container>
      <ng-template #chipsAndInput>
        <mat-chip
          *ngFor="let chip of chips"
          [removable]="removable"
          (removed)="removeChipById(chip.id)"
          (click)="onChipClick(chip); $event.stopPropagation()"
          [matTooltip]="'Click to select or remove'"
        >
          {{ chip.name }}
          <button matChipRemove *ngIf="removable" (click)="removeChipById(chip.id)">
            <mat-icon>cancel</mat-icon>
          </button>
        </mat-chip>
        <ng-container *ngIf="(filteredChips | async) as options">
          <input
            *ngIf="options.length > 0"
            #chipInput
            #autoTrigger="matAutocompleteTrigger"
            [formControl]="chipCtrl"
            [matAutocomplete]="auto"
            (keydown.enter)="add({ input: chipInput, value: chipInput.value })"
            (keydown.comma)="add({ input: chipInput, value: chipInput.value })"
            (click)="$event.stopPropagation()"
            [placeholder]="chips.length === 0 ? 'please select one option' : placeholder"
            [style.min-width]="chips.length === 0 ? '150px' : '100px'"
            class="chip-input"
            style="outline: none; border: none; background: transparent;"
          >
        </ng-container>
        <mat-autocomplete #auto="matAutocomplete">
          <ng-container *ngIf="(filteredChips | async) as options">
            <!-- Single option: no checkbox, no confirm button -->
            <ng-container *ngIf="options.length === 1; else multiSelect">
              <mat-option [value]="options[0]" (onSelectionChange)="$event.isUserInput && add({ input: chipInput.nativeElement, value: options[0].name })">
                {{ options[0].name }}
              </mat-option>
            </ng-container>
            <!-- Multiple options: checkboxes and confirm button -->
            <ng-template #multiSelect>
              <div class="all-options-toggle-container">
                <mat-slide-toggle
                  color="primary"
                  [checked]="allOptionsSelected"
                  (change)="onAllOptionsToggle($event)">
                  ALL {{ label | uppercase }}
                </mat-slide-toggle>
              </div>
              <mat-divider></mat-divider>
              <mat-option *ngFor="let chip of options" [value]="chip" [disabled]="true">
                <mat-checkbox
                  [checked]="isOptionSelected(chip)"
                  (click)="$event.stopPropagation(); toggleOptionSelection(chip)">
                </mat-checkbox>
                {{ chip.name }}
              </mat-option>
              <div *ngIf="options.length > 0" style="padding: 8px;">
                <button mat-raised-button color="primary" (click)="confirmOptionSelection()" style="width: 100%;" [disabled]="selectedOptions.length === 0">
                  Confirm Selection ({{selectedOptions.length}})
                </button>
              </div>
            </ng-template>
          </ng-container>
        </mat-autocomplete>
      </ng-template>
    </div>
    <button mat-icon-button class="scroll-button right-scroll" (click)="scrollRight()" *ngIf="showScrollButtons && !allOptionsSelected">
      <mat-icon>chevron_right</mat-icon>
    </button>
  </div>
</div>